<script setup>
import { ref } from "vue";
import { handleGoBack } from "@/utils/router";

const props = defineProps({
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
});

const statusBarHeight = ref(0);
statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;

// go back
const goBack = () => {
  handleGoBack();
};
</script>
<template>
  <view class="customize-top-bar">
    <!-- #ifdef APP-PLUS || MP-WEIXIN -->
    <slot name="bgView"></slot>
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    <view
      class="my-content-title-name"
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
      <!-- 后退按钮 -->
      <view class="left-container" @click="goBack">
        <uni-icons type="back" size="24" color="#000000"></uni-icons>
      </view>
      <view>{{ title || "" }}</view>
      <view class="placeholder-view" />
    </view>
    <!-- #endif -->
    <!-- #ifndef MP -->
    <view :style="{ top: statusBarHeight + 'px' }">
      <slot name="bgView"></slot>
    </view>
    <view class="my-content-title-name">
      <!-- 我的 -->
    </view>
    <!-- #endif -->
  </view>
</template>

<style scoped lang="scss">
.customize-top-bar {
  .mycontent-top-bc {
    position: absolute;
    width: 100%;
    background: linear-gradient(180deg, #fef2dd 2%, #f7f7f7 95%);
    height: 562rpx;
    z-index: 0;
    left: 0;
  }
  .my-content-title-name {
    font-weight: 400;
    font-size: 30rpx;
    color: #000000;
    text-align: center;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .placeholder-view {
      width: 50rpx;
    }
  }
}
</style>
